<!-- Copyright 2016 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">

<link rel="import" href="../../components/oobe_icons.html">
<link rel="import" href="../../components/behaviors/login_screen_behavior.html">
<link rel="import" href="../../components/behaviors/multi_step_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_dialog_host_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_i18n_behavior.html">
<link rel="import" href="../../components/buttons/oobe_next_button.html">
<link rel="import" href="../../components/buttons/oobe_text_button.html">
<link rel="import" href="../../components/common_styles/common_styles.html">
<link rel="import" href="../../components/common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="../../components/dialogs/oobe_adaptive_dialog.html">
<link rel="import" href="../../components/dialogs/oobe_loading_dialog.html">
<link rel="import" href="../../components/dialogs/oobe_modal_dialog.html">


<!--
  Offline UI for the Active Directory password change.

  Attributes:
    'username' - User principal name.
  Methods:
    'reset' - resets to the initial state.
    'setInvalid' - invalidates input depending on passed error.
-->
<dom-module id="active-directory-password-change-element">
  <template>
    <style include="oobe-dialog-host-styles">
      cr-input {
        padding-inline-end: 24px;
        padding-inline-start: 24px;
      }
    </style>
    <oobe-adaptive-dialog id="passwordChangeDialog" role="dialog"
        for-step="password">
      <iron-icon slot="icon" icon="oobe-32:avatar"></iron-icon>
      <h1 slot="title" id="title">
        [[i18nDynamic(locale, 'adPassChangeMessage', username_)]]
      </h1>
      <div slot="content" class="landscape-vertical-centered">
        <cr-input slot="inputs" type="password" id="oldPassword" required
            class="focus-on-show" value="{{oldPassword_}}"
            invalid="{{oldPasswordWrong_}}"
            label="[[i18nDynamic(locale, 'adPassChangeOldPasswordHint')]]"
            error-message="[[
                i18nDynamic(locale, 'adPassChangeOldPasswordError')]]">
        </cr-input>
        <cr-input slot="inputs" type="password" id="newPassword" required
            value="{{newPassword_}}" invalid="{{newPasswordRejected_}}"
            label="[[i18nDynamic(locale, 'adPassChangeNewPasswordHint')]]"
            error-message="[[i18nDynamic(locale,
                'adPassChangeNewPasswordRejected')]]">
        </cr-input>
        <cr-input slot="inputs" type="password" id="newPasswordRepeat"
            required value="{{newPasswordRepeat_}}"
            invalid="{{passwordMismatch_}}"
            label="[[i18nDynamic(locale, 'adPassChangeRepeatNewPasswordHint')]]"
            error-message="[[i18nDynamic(locale,
                'adPassChangePasswordsMismatch')]]">
        </cr-input>
      </div>
      <div slot="bottom-buttons">
        <oobe-text-button id="cancel" on-tap="onClose_" text-key="cancel">
        </oobe-text-button>
        <oobe-next-button id="next" on-tap="onSubmit_"
            text-key="offlineLoginNextBtn">
        </oobe-next-button>
      </div>
    </oobe-adaptive-dialog>
    <oobe-loading-dialog id="progress" role="dialog" for-step="progress"
        title-key="gaiaLoading">
      <iron-icon slot="icon" icon="oobe-32:googleg"></iron-icon>
    </oobe-loading-dialog>
    <oobe-modal-dialog id="errorDialog">
      <div slot="content">[[errorDialogText_]]</div>
    </oobe-modal-dialog>
  </template>
  <script src="active_directory_password_change.js"></script>
</dom-module>
